import { useState, useEffect } from 'react';
import axios from '../utils/axios';
import { toast } from 'sonner';
import { ethers } from 'ethers';

const MedicalRecords = () => {
    const [records, setRecords] = useState([]);
    const [loading, setLoading] = useState(false);
    const [options, setOptions] = useState([0])
    const [showNewForm, setShowNewForm] = useState(true);

    useEffect(() => {
        // const fetchRecords = async () => {
        //     try {
        //         const response = await axios.get('/api/medical-records');
        //         setRecords(response.data);
        //     } catch (error) {
        //         console.error('获取医疗记录失败:', error);
        //     } finally {
        //         setLoading(false);
        //     }
        // };

        // const fetchOptions = async () => {
        //     try {
        //         const response = await axios.get('/api/v1/medical-records/options');
        //         setOptions(response.data.options);
        //     } catch (error) {
        //         console.error('获取选项失败:', error);
        //     }
        // }

        // fetchOptions();
        // fetchRecords();
    }, []);

    if (loading) return <div>加载中...</div>;

    const [formData, setFormData] = useState({
        name: '',
        idNumber: '',
        date: '',
        medicalType: '门诊',
        reason: '',
        applyAmount: '1',
    });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            
            console.log('提交表单:', formData)
            const response = await axios.post('/api/v1/medical-records/create', { formData }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            // 更新本地记录列表
            // setRecords([...records, response.data]);
            console.log(response.data)
            toast.success('表单提交成功');
            setFormData({
                name: '',
                idNumber: '',
                date: '',
                medicalType: '门诊',
                reason: '',
                applyAmount: '1',
            });
        } catch (error) {
            console.error('表单提交失败:', error);
            toast.error('表单提交失败');
        }
    };

    return (
        <div className="space-y-6">
            <h2 className="text-2xl font-bold text-gray-800">医疗记录管理</h2>
            
            <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
                <h3 className="mb-6 text-xl font-semibold text-gray-800">新建医疗记录</h3>
                <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                        {/* 姓名 */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">姓名</label>
                            <input 
                                type="text" 
                                value={formData.name}
                                onChange={(e) => setFormData({...formData, name: e.target.value})}
                                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7] p-2"
                                required
                            />
                        </div>

                        {/* 身份证号 */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">身份证号</label>
                            <input 
                                type="text" 
                                value={formData.idNumber}
                                onChange={(e) => setFormData({...formData, idNumber: e.target.value})}
                                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7] p-2"
                                required
                            />
                        </div>

                        {/* 申请日期 */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">申请日期</label>
                            <input 
                                type="date" 
                                value={formData.date}
                                onChange={(e) => setFormData({...formData, date: e.target.value})}
                                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7] p-2"
                                required
                            />
                        </div>

                        {/* 医疗类型 */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">医疗类型</label>
                            <select 
                                value={formData.medicalType}
                                onChange={(e) => setFormData({...formData, medicalType: e.target.value})}
                                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7] p-2"
                                required
                            >
                                <option value="0">门诊</option>
                                <option value="1">住院</option>
                                <option value="2">实验室</option>
                                <option value="3">手术</option>
                            </select>
                        </div>

                        {/* 申请金额 */}
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">申请金额 (ETH)</label>
                            <input
                                type="number"
                                step="0.01"
                                min="0"
                                value={formData.applyAmount}
                                onChange={(e) => setFormData({...formData, applyAmount: e.target.value})}
                                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7] p-2"
                                required
                            />
                        </div>
                    </div>

                    {/* 申请理由 */}
                    <div className="space-y-2">
                        <label className="block text-sm font-medium text-gray-700">申请理由</label>
                        <textarea 
                            rows={4}
                            value={formData.reason}
                            onChange={(e) => setFormData({...formData, reason: e.target.value})}
                            className="block w-full rounded-md border-gray-300 shadow-sm focus:border-[#673AB7] focus:ring-[#673AB7] p-2"
                            required
                        />
                    </div>

                    {/* 按钮组 */}
                    <div className="flex justify-end space-x-4 pt-4">
                        <button
                            type="button"
                            onClick={() => setShowNewForm(false)}
                            className="rounded-md bg-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-300 transition-colors"
                        >
                            取消
                        </button>
                        <button
                            type="submit"
                            className="rounded-md bg-[#673AB7] px-4 py-2 text-white hover:bg-[#9575CD] transition-colors"
                        >
                            提交申请
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default MedicalRecords;